import React, { memo } from "react";
import sty from "./sty.module.css";
import cs from "classnames";

import ThemeHeaderRcm from "@/components/themeHeaderRcm";

import SongItem from "@/components/songItem";
import { handleMinSec } from "@/utils/format-utils";
const SongsList = memo((porps) => {
  const { list } = porps;
  console.log("SongsList 执行");

  const len = list.length;
  const rightSlot = (
    <span>
      播放 <i style={{ color: "red" }}> {len}</i>次
    </span>
  );
  return (
    <>
      <ThemeHeaderRcm title="歌曲列表" right={rightSlot} showIcon={false} />
      <div className={sty.header}>
        <div className="sprite_table"></div>
        <div className={cs("sprite_table", sty.title)}>标题</div>
        <div className={cs("sprite_table", sty.time)}>时常</div>
        <div className={cs("sprite_table", sty.singer)}>歌手</div>
      </div>
      <ul className={sty.list}>
        {!!len &&
          list
            .slice(0, 100)
            .map((v, i) => (
              <SongItem
                index={i + 1}
                key={v.id}
                coverPic={i < 3 ? v.al.picUrl : ""}
                duration={handleMinSec(v.dt)}
                songName={v.name}
                singer={v.ar[0].name}
                songId={v.id}
              />
            ))}
      </ul>
    </>
  );
});
export default SongsList;
